/*
 * This file contains generic CSS classes intended for styling dialogue text,
 * covering commonly-used effects and usecases.
 *
 * This file can also be used as an example to build off of for custom
 * character CSS stylesheets.
 */

/*
 * All character dialogue displayed within dialogue boxes is wrapped within
 * a <span> element with the `dialogue` class.
 *
 * The CSS rules in this file make use of that to help avoid conflicts between
 * dialogue and other parts of the game.
 */

/* This rule decreases the amount of empty space above and below an
 * <hr> element and also makes it a bit darker, as compared to the default
 * settings from Bootstrap.
 */
.dialogue hr {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-top-color: #bbb;
}

/* Italics: */
.dialogue .i {
    font-style: italic;
}

/* Bold: */
.dialogue .b {
    font-weight: bold;
}

/* Underline: */
.dialogue .u {
    text-decoration: underline;
}

/* Strikethrough: */
.dialogue .s {
    text-decoration: line-through;
}

/* Highlight (yellow): */
.dialogue .highlight {
    padding: .2em;
    background-color: #ff0;
}

/* Monospaced font: */
.dialogue .mono {
    font-family: monospace;

    /* Monospaced fonts are a bit widely-spaced by default, so decrease the
     * space between letters slightly.
     */
    letter-spacing: -0.03em;
}

/* Small text:
 *
 * Bootstrap also provides a rule for this, but it's included here for the
 * sake of completeness.
 */
.dialogue .small {
    font-size: 85%;
}

/* Big text: */
.dialogue .big {
    font-size: 115%;
}



/* This is an example of a character-specific rule.
 *
 * Note that the space between
 * .my-custom-style and [data-character="my-character"]
 * is _NOT_ optional.
 *
 * You can, of course, change `my-custom-style` and `my-character` to fit your
 * use-cases.
 */

/*
.dialogue .my-custom-style[data-character="my-character"] {
    color: red;
}
*/


/* Naturally, character-specific rules can be made specific to color schemes
 * by using the appropriate rule selectors.
 *
 * Color scheme CSS classes are applied to the root element.
 */

/*
.dark-mode .dialogue .my-dark-mode-style[data-character="my-character"] {
    color: lightblue;
}
*/